// 合作方式比例
<template>
    <div class="gradient-content full-width">
        <div :id="idName"></div>
    </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
    props: {
        idName: {
            type: String,
            default: 'cooperationChart',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
        }
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content`)
            this.height = boxContElement.clientHeight
            if (this.chart) {
                this.chart.destroy()
            }
            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
                padding: [10, 24, 10, 24],
            })

            // Step 2: 载入数据源
            this.chart.data(this.chartData)

            // Step 3: 创建图形语法，定义 Position 和 Color
            this.chart.coordinate('theta', {
                radius: 0.55,
            })

            this.chart.tooltip({
                showTitle: false,
                showMarkers: false,
            })
            this.chart
                .interval()
                .position('value')
                .color('type')
                .label('type*value', {
                    layout: [{ type: 'pie-spider' }, { type: 'limit-in-plot', cfg: { action: 'ellipsis' /** 或 translate */ } }],
                    labelHeight: 20,
                    content: obj => `${obj.type}: ${obj.value} (${obj.percent})`,
                    labelLine: {
                        style: {
                            lineWidth: 0.5,
                        },
                    },
                    // 添加样式配置，减小字体大小
                    style: {
                        fontSize: 12, // 可根据需要调整具体数值
                        // fill: this.shop_id == 18 ? '#333333' : '#fff',
                    },
                })
                .adjust('stack')

            this.chart.interaction('element-active')

            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>
